import React from 'react';
import { Table } from 'react-bootstrap';

const TimeTable = ({ courses }) => {
  const weekdays = ['周一', '周二', '周三', '周四', '周五'];
  const timeSlots = [
    { slot: 1, time: '1-2节 8:30-10:10' },
    { slot: 3, time: '3-4节 10:30-12:10' },
    { slot: 5, time: '5-6节 14:00-15:40' },
    { slot: 7, time: '7-8节 16:00-17:40' },
    { slot: 9, time: '9-10节 19:00-20:40' }
  ];

  // 创建时间表矩阵
  const createTimeMatrix = () => {
    const matrix = {};
    weekdays.forEach(day => {
      matrix[day] = {};
      timeSlots.forEach(({ slot }) => {
        matrix[day][slot] = [];
      });
    });

    // 填充课程
    courses.forEach(course => {
      course.课程安排.forEach(schedule => {
        // 只处理周一到周五的课程
        if (schedule.星期 >= 1 && schedule.星期 <= 5) {
          const day = weekdays[schedule.星期 - 1];
          const startSlot = schedule.开始节次;
          const endSlot = schedule.结束节次;
          
          for (let slot = startSlot; slot <= endSlot; slot++) {
            if (matrix[day][slot]) {
              matrix[day][slot].push(course);
            }
          }
        }
      });
    });

    return matrix;
  };

  const timeMatrix = createTimeMatrix();

  const renderCell = (courses) => {
    if (!courses || courses.length === 0) return null;
    
    return courses.map((course, index) => (
      <div
        key={`${course.id}-${index}`}
        className="p-1 mb-1"
        style={{
          backgroundColor: '#e3f2fd',
          borderRadius: '4px',
          fontSize: '0.75rem',
          wordBreak: 'break-word'
        }}
      >
        <div className="fw-bold">{course.课程名称}</div>
        <div className="text-muted">{course.教师姓名}</div>
        {course.教室 && <div className="text-muted small">{course.教室}</div>}
      </div>
    ));
  };

  return (
    <div className="table-responsive">
      <Table 
        bordered 
        className="text-center" 
        style={{ 
          width: '100%',
          maxWidth: '1000px',
          margin: '0 auto',
          tableLayout: 'fixed'
        }}
      >
        <thead>
          <tr>
            <th style={{ width: '160px' }}>时间</th>
            {weekdays.map(day => (
              <th key={day} style={{ width: 'calc((100% - 160px) / 5)' }}>{day}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {timeSlots.map(({ slot, time }) => (
            <tr key={slot}>
              <td style={{ fontSize: '0.8rem', whiteSpace: 'pre-line' }}>
                {time}
              </td>
              {weekdays.map(day => (
                <td 
                  key={`${day}-${slot}`} 
                  className="align-top"
                  style={{ 
                    height: '80px',
                    padding: '4px',
                    verticalAlign: 'top'
                  }}
                >
                  {renderCell(timeMatrix[day][slot])}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

export default TimeTable; 